<template>
	<view class="content">
		<u-navbar :title="`与${fromUserInfo.name}的聊天`" title-width="500" :border-bottom="false" back-icon-color="#ffffff"
			title-color="#fff" :background="{backgroundColor:'#2A2931'}"></u-navbar>
		<view class="content-box" @touchstart="touchstart" id="content-box" :class="{'content-showfn':showFunBtn}">
			<!-- 背景图- 定位方式 -->
			<image class="content-box-bg" :src="_user_info.chatBgImg" :style="{ height: imgHeight }"></image>
			<view class="placeholder" v-if="getwxpic"></view>
			<view class="content-box-loading" v-if="!loading && load_al">
				<u-loading mode="flower"></u-loading>
			</view>
			<view class="message" v-for="(item, index) in messageList" :key="index" :id="`msg-${item.id}`">
				<block v-if="item.status==3 && item.type !=9">
					<view class="tips" style="font-size: 20rpx; color: #F29100;text-align: center;padding: 30rpx 0;">该消息已被撤回</view>
				</block>
				<block v-else>
				<view class="message-item " :class="item.self ? 'right' : 'left'" v-if="item.type != 9">
					<!-- <image class="avatar" @click="linkToBusinessCard" :src="item.head_portrait | formatImage" mode="aspectFill"></image> -->
					<u-avatar :src="item.head_portrait | formatImage" @click="linkToBusinessCard(item.self)"></u-avatar>
					<!-- contentType = 1 文本 -->
					<view class="content" v-if="item.type == 0" @longpress="showops(index)"><u-parse :html="item.content"></u-parse></view>
					<!-- contentType = 2 语音 -->
					<view class="content contentType2" @longpress="showops(index)" :class="[{ 'content-type-right': item.self }]" v-if="item.type == 2" @click="handleAudio(index)" hover-class="contentType2-hover-class" :style="{width:`${130+(item.second*2)}rpx`}">
						<view class="voice_icon" :class="[
								{ voice_icon_right: item.self },
								{ voice_icon_left: !item.self },
								{ voice_icon_right_an: item.anmitionPlay && item.self },
								{ voice_icon_left_an: item.anmitionPlay && !item.self }
							]"></view>
						<view class="">{{ item.second }}''</view>
					</view>
					<!-- contentType = 3 图片 -->
					<view class="content contentType3" @longpress="showops(index)" v-if="item.type == 1" @click="viewImg(item.content)">
						<image :src="item.content | formatImage" class="img" mode="widthFix"></image>
					</view>
				</view>
				<view class="tips" v-else style="font-size: 20rpx; color: #F29100;text-align: center;padding: 30rpx 0;">
					{{item.content}}</view>
				</block>
			</view>
			<!-- 成为VIP解锁微信 -->
			<!-- <image src="/static/getwx.png" v-if="getwxpic" @click="jswx" class="getwx" mode="widthFix"></image> -->
		</view>

		<!-- 底部聊天输入框 -->
		<view class="input-box" :class="{ 'input-box-mpInputMargin': mpInputMargin }" @touchmove.prevent>
			<view class="input-box-flex">
				<image v-if="chatType === 'keyboard'" class="icon_img" :src="require('@/static/voice.png')"
					@click="switchChatType('voice')"></image>
				<image v-if="chatType === 'voice'" class="icon_img" :src="require('@/static/keyboard.png')"
					@click="switchChatType('keyboard')"></image>
				<view class="input-box-flex-grow">
					<input type="text" v-if="chatType === 'keyboard'" class="content" id="input"
						v-model="formData.content" :hold-keyboard="true" :confirm-type="'send'" :confirm-hold="true"
						placeholder-style="color:#DDDDDD;" :cursor-spacing="10" @confirm="sendMsg(null)" />
					<view v-if="chatType === 'voice'" class="voice_title"
						:style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }" @touchstart.stop.prevent="startVoice"
						@touchmove.stop.prevent="moveVoice" @touchend.stop="endVoice" @touchcancel.stop="cancelVoice">
						{{ voiceTitle }}
					</view>
				</view>
				<button class="btn" type="primary" v-if="formData.content" size="mini"
					@touchend.prevent="sendMsg(null)">发送</button>
				<image class=" icon_btn_add" v-else :src="require('@/static/add.png')" @click="switchFun"></image>

			</view>
			<view class="fun-box" :class="{'show-fun-box':showFunBtn}">
				<u-grid :col="4" :border="false" @click="clickGrid" hover-class="gridhover">
					<u-grid-item v-for="(item, index) in funList" :index="index" :key="index" bg-color="#2A2931">
						<u-icon :name="item.icon" color="#999" :size="52"></u-icon>
						<view class="grid-text">{{ item.title }}</view>
					</u-grid-item>
				</u-grid>
			</view>

		</view>

		<!-- //语音动画 -->
		<view class="voice_an" v-if="recording">
			<view class="voice_an_icon">
				<view id="one" class="wave"></view>
				<view id="two" class="wave"></view>
				<view id="three" class="wave"></view>
				<view id="four" class="wave"></view>
				<view id="five" class="wave"></view>
				<view id="six" class="wave"></view>
				<view id="seven" class="wave"></view>
			</view>
			<view class="text">{{voiceIconText}}</view>
		</view>
		<u-action-sheet :list="opslist" @click="opsclick" v-model="opsshow"></u-action-sheet>
		<chat-modal :wxmodal="wxmodal" @modalclose="wxmodal = false" :userinfo="otherInfo"></chat-modal>
	</view>
</template>

<script>
	import {
		WS
	} from '@/common/WS.js'
	import chatModal from '@/components/chatmodal.vue'
	export default {
		components:{
			chatModal
		},
		data() {
			return {
				wxmodal: false,
				opsindex: -1,
				opslist: [{
					text: '撤回'
				}, {
					text: '删除'
				}, {
					text: '复制' 
				}],
				opsshow: false,
				fromUserInfo: {},
				formData: {
					content: '',
					limit: 20,
					index: 0
				},
				messageList: [],
				loading: true, //标识是否正在获取数据
				imgHeight: '1000px',
				mpInputMargin: false, //适配微信小程序 底部输入框高度被顶起的问题
				chatType: "keyboard", // 图标类型 'voice'语音 'keyboard'键盘
				voiceTitle: '按住 说话',
				Recorder: uni.getRecorderManager(),
				Audio: uni.createInnerAudioContext(),
				recording: false, //标识是否正在录音
				isStopVoice: false, //加锁 防止点击过快引起的当录音正在准备(还没有开始录音)的时候,却调用了stop方法但并不能阻止录音的问题
				voiceInterval: null,
				voiceTime: 0, //总共录音时长
				canSend: true, //是否可以发送
				PointY: 0, //坐标位置
				voiceIconText: "正在录音...",
				showFunBtn: false, //是否展示功能型按钮
				AudioExam: null, //正在播放音频的实例
				funList: [{
						icon: "photo-fill",
						title: "照片",
						uploadType: ["album"]
					},
					{
						icon: "camera-fill",
						title: "拍摄",
						uploadType: ["camera"]
					},
				],
				getwxpic: false,
				page: 0,
				loaded: true,
				load_al: true,
				isDown: false,
				otherInfo: {},
				ws: null
			};
		},
		methods: {
			async judgeService() {
				var userid = this.$store.state.userid
				var touserid = this.fromUserInfo.fromUserId
				const {data:ret} = await this.$Request({
					url: 'api/Member/kefu'
				})
				if (ret && ret.data && ret.data.id) {
					if (touserid == ret.data.id) {
						isKeFu = 1;
						console.log('联系客服');
						var obj = {
							content: '',
							type: 0,
							userid: userid,
							touserid: touserid,
						};
						this.addTalk()
					}
				}
			},
			async addTalk(){
				var userid = this.$store.state.userid
				var touserid = this.fromUserInfo.fromUserId
				this.$Request({
					url: 'apis/home/privatechat/addTalk',
					data: {
						content: '',
						type: 0,
						userid: userid,
						touserid: touserid,
					}
				})
			},
			jswx() {
				var _this = this
				this.$judgeQx(this.otherInfo.id, function() {
					console.log(_this.otherInfo)
					_this.otherInfo.link = 1;
					if (!_this.otherInfo.qq && !_this.otherInfo.wxcount) {
						_this.$u.toast('对方未填写微信或qq，但你可在平台联系对方')
					} else {
						_this.wxmodal = true
					}
				})
			},
			async chehumsg(){
				const {data:res} = await this.$Request({
					url: 'apis/home/privatechat/recall',
					data: {
						chat_id: this.messageList[this.opsindex].id,
						user_id: this.$store.state.userid
					}
				})
				var msg = res.msg;
				this.$u.toast(msg);
				if (res && res.code == 200) {
					this.messageList[this.opsindex].status = 3
				}
			},
			async deletemsg(){
				const {data:res} = await this.$Request({
					url:'apis/home/privatechat/delete',
					data: {
						chat_id: this.messageList[this.opsindex].id,
						user_id: this.$store.state.userid
					}
				})
				var msg = res.msg;
				this.$u.toast(msg);
				if (res && res.code == 200) {
					this.messageList.splice(this.opsindex, 1);
				}
			},
			opsclick(e){
				switch(e){
					// 撤回
					case 0:
						this.chehumsg()
						break;
					// 删除
					case 1:
						this.deletemsg()
						break;
					// 复制
					case 2:
						uni.setClipboardData({
							data:this.messageList[this.opsindex].content
						})
						break;
				}
			},
			showops(idx){
				this.opslist = this.messageList[idx].type == 0 ? [{
					text: '撤回'
				}, {
					text: '删除'
				}, {
					text: '复制' 
				}] : [{
					text: '撤回'
				}, {
					text: '删除'
				}]
				this.opsindex = idx
				this.opsshow = true
			},
			async getOtherInfo(uid) {
				const {
					data: res
				} = await this.$Request({
					url: 'api/user/info',
					data: {
						longitude: this.$store.state.longitude,
						latitude: this.$store.state.latitude,
						user_id: uid,
						to_user: this.$store.state.userid
					}
				})
				if (res.result.pull_black == 1) {
					uni.showModal({
						content: '对方已拉黑您',
						showCancel: false,
						success(res) {
							if (res.confirm) {
								uni.navigateBack()
							}
						}
					})
					return;
				}
				this.otherInfo = res.result
				console.log(this.$HOSTURL + res.result.head_100)
				this.$set(this.fromUserInfo, 'fromUserHeadImg', this.$HOSTURL + res.result.head_100)
				if ((res.result.qq || res.result.wxcount) && res.result.link_auth == 1) {
					this.getwxpic = true
				}
			},
			//拼接消息 处理滚动
			async joinData() {
				if (!this.loading) {
					//如果没有获取数据 即loading为false时，return 避免用户重复上拉触发加载
					return;
				}
				this.loading = false;
				const data = await this.loadMore();
				//获取节点信息
				const {
					index
				} = this.formData;
				const sel = `#msg-${data[data.length - 1].id}`;
				this.messageList = [...data, ...this.messageList];
				//填充数据后，视图会自动滚动到最上面一层然后瞬间再跳回bindScroll的指定位置 ---体验不是很好，后期优化
				this.$nextTick(() => {
					this.bindScroll(sel);
					//如果还有数据
					if (this.formData.limit >= data.length) {
						this.formData.index++;
						setTimeout(() => {
							this.loading = true;
						}, 200);
					} else {
						this.load_al = false
					}
				});
			},
			//处理滚动
			bindScroll(sel, duration = 0) {
				const query = uni.createSelectorQuery().in(this);
				query
					.select(sel)
					.boundingClientRect(data => {
						uni.pageScrollTo({
							scrollTop: data && data.top - 100,
							duration
						});
					})
					.exec();
			},
			//获取消息
			//切换语音或者键盘方式
			switchChatType(type) {
				this.chatType = type;
				this.showFunBtn = false;
			},
			//切换功能性按钮
			switchFun() {
				this.chatType = 'keyboard'
				this.showFunBtn = !this.showFunBtn;
				uni.hideKeyboard()
			},
			//发送消息
			sendMsg(data) {
				console.log(this._user_info.headImg.substring(0,4));
				var touxiang = "";
				if(this._user_info.headImg.substring(1,4) == 'http'){
					touxiang = this._user_info.headImg;
				}else{
					touxiang = this.$HOSTURL + this._user_info.headImg;
				}
				const params = {
					id: Date.now(), //已发送过去消息的id
					content: this.formData.content,
					head_portrait: touxiang, //用户头像
					userid: this.$store.state.userid,
					type: 'text',
					self: 1
				};

				if (data) {
					if (data.type == 'sound') {
						//说明是发送语音
						params.content = data.content;
						params.type = data.type;
						params.second = data.second;
						params.anmitionPlay = false;
					} else if (data.type == 'image') {
						//发送图片
						params.content = data.content;
						params.type = data.type;
					}
				} else if (!this.$u.trim(this.formData.content)) {
					//验证输入框书否为空字符传
					return;
				}
				console.log(params)
				this.toRobot(params,()=>{
					this.$nextTick(() => {
						this.formData.content = '';
						// #ifdef MP-WEIXIN
						if (params.type == 1) {
							uni.pageScrollTo({
								scrollTop: 99999,
								duration: 100, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
							});
						} else {
							setTimeout(() => {
								uni.pageScrollTo({
									scrollTop: 99999,
									duration: 100, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
								});
							}, 150)
						}
						// #endif
					
						// #ifndef MP-WEIXIN
						uni.pageScrollTo({
							scrollTop: 99999,
							duration: 100
						});
						// #endif
					
						if (this.showFunBtn) {
							this.showFunBtn = false;
						}
					
						// #ifdef MP-WEIXIN 
						if (params.type == 1) {
							this.mpInputMargin = true;
						}
						// #endif
						//h5浏览器并没有很好的办法控制键盘一直处于唤起状态 而且会有样式性的问题
						// #ifdef H5
						uni.hideKeyboard();
						// #endif
						
						uni.hideKeyboard(); 
					});
				})
			},
			//用户触摸屏幕的时候隐藏键盘
			touchstart() {
				uni.hideKeyboard();
			},
			// userid 用户id
			linkToBusinessCard(self) {
				uni.navigateTo({
					url: '/pages/userinfo/index?id=' + (self ? this.$store.state.userid : this.fromUserInfo.fromUserId)
				})
			},
			//准备开始录音
			startVoice(e) {
				var that = this;
				const permission = 'android.permission.RECORD_AUDIO'; // 要检查的权限
				plus.android.checkPermission(
				  permission,
				  granted => {
					  console.log(granted);
					if (granted.checkResult == '-1') {
					  uni.showModal({
						title: '提示',
						content: '开心小圈对录音权限申请说明：便于您使用该功能与其他用户发送语音消息等场景中应用录音内容。',
						success: function (res) {
							
							if (!that.Audio.paused) {
								//如果音频正在播放 先暂停。
								ththatis.stopAudio(that.AudioExam)
							}
							that.recording = true;
							that.isStopVoice = false;
							that.canSend = true;
							that.voiceIconText = "正在录音..."
							that.PointY = e.touches[0].clientY;
							that.Recorder.start({
								format: 'mp3'
							});
						},
					  })
					}else{
						if (!that.Audio.paused) {
							//如果音频正在播放 先暂停。
							that.stopAudio(that.AudioExam)
						}
						that.recording = true;
						that.isStopVoice = false;
						that.canSend = true;
						that.voiceIconText = "正在录音..."
						that.PointY = e.touches[0].clientY;
						that.Recorder.start({
							format: 'mp3'
						});
					}
				  },
				  error => {
					console.error('Error checking permission:', error.message);
				  }
				);
			},
			//录音已经开始
			beginVoice() {
				if (this.isStopVoice) {
					this.Recorder.stop();
					return;
				}
				this.voiceTitle = '松开 结束'
				this.voiceInterval = setInterval(() => {
					this.voiceTime++;
				}, 1000)
			},
			//move 正在录音中
			moveVoice(e) {
				const PointY = e.touches[0].clientY
				const slideY = this.PointY - PointY;
				if (slideY > uni.upx2px(120)) {
					this.canSend = false;
					this.voiceIconText = '松开手指 取消发送 '
				} else if (slideY > uni.upx2px(60)) {
					this.canSend = true;
					this.voiceIconText = '手指上滑 取消发送 '
				} else {
					this.voiceIconText = '正在录音... '
				}
			},
			//结束录音
			endVoice() {
				this.isStopVoice = true; //加锁 确保已经结束录音并不会录制
				this.Recorder.stop();
				this.voiceTitle = '按住 说话'
			},
			//录音被打断
			cancelVoice(e) {
				this.voiceTime = 0;
				this.voiceTitle = '按住 说话';
				this.canSend = false;
				this.Recorder.stop();
			},
			//处理录音文件
			handleRecorder({
				tempFilePath,
				duration
			}) {
				let second;
				// #ifdef MP-WEIXIN
				this.voiceTime = 0;
				if (duration < 600) {
					this.voiceIconText = "说话时间过短";
					setTimeout(() => {
						this.recording = false;
					}, 200)
					return;
				}
				second = duration / 1000;
				// #endif

				// #ifdef APP-PLUS
				second = this.voiceTime + 1;
				this.voiceTime = 0;
				if (second <= 0) {
					this.voiceIconText = "说话时间过短";
					setTimeout(() => {
						this.recording = false;
					}, 200)
					return;
				};
				// #endif

				this.recording = false;
				const params = {
					type: 'sound',
					content: tempFilePath,
					second: Math.ceil(second)
				};
				this.canSend && this.sendMsg(params);
			},
			//控制播放还是暂停音频文件
			handleAudio(index) {
				if(this.AudioExam && this.AudioExam.id && this.AudioExam.id!=this.messageList[index].id){
					this.stopAudio(this.AudioExam)
				}
				this.Audio.paused ? this.playAudio(this.messageList[index]) : this.stopAudio(this.messageList[index]);
			},
			//播放音频
			playAudio(item) {
				this.Audio.src = this.$HOSTURL + item.content;
				this.Audio.id = item.id;
				this.Audio.play();
				item.anmitionPlay = true;
			},
			//停止音频
			stopAudio(item) {
				this.Audio.stop();
				this.Audio.src = '';
				item.anmitionPlay = false;
			},
			//关闭动画
			closeAnmition() {
				const id = this.Audio.id;
				const item = this.messageList.find(it => it.id == id);
				console.log(item)
				item.anmitionPlay = false;
			},
			//点击宫格时触发
			clickGrid(index) {
				if (index == 0) {
					this.chooseImage(['album'])
				} else if (index == 1) {
					this.chooseImage(['camera'])
				}
			},
			//发送图片
			chooseImage(sourceType) {
				uni.chooseImage({
					sourceType,
					sizeType: ['compressed'],
					success: res => {
						this.showFunBtn = false;
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							const params = {
								type: 'image',
								content: res.tempFilePaths[i],
							};
							this.sendMsg(params)
						}
					}
				})
			},
			//查看大图
			viewImg(imgList) {
				uni.previewImage({
					urls: [this.$HOSTURL + imgList],
					// #ifndef MP-WEIXIN
					indicator: 'number'
					// #endif
				});
			},

			async setRead() {
				// 修改对方消息 阅读情况
				await this.$Request({
					url: 'apis/Home/Privatechat/changeread',
					data: {
						user_id: this.$store.state.userid,
						touserid: this.fromUserInfo.fromUserId,
					}
				})
				await this.$Request({
					url: 'apis/Home/Privatechat/changecount',
					data: {
						user_id: this.$store.state.userid,
						touserid: this.fromUserInfo.fromUserId,
					}
				})
				this.$pushMsg(this.$store.state.userid);
			},
			async getMsgList() {
				var _this = this
				var userid = this.$store.state.userid
				var touserid = this.fromUserInfo.fromUserId
				const {
					data: ret
				} = await this.$Request({
					url: 'apis/home/Privatechat/getMsgList',
					data: {
						userid: this.$store.state.userid,
						touserid: this.fromUserInfo.fromUserId,
						page: this.formData.index,
					}
				})
				if (ret && ret.code == 200) {
					var result = ret.result;
					var date = new Date();
					var _this = this
					// 获取聊天警示语
					uni.showLoading({
						mask:true
					})
					this.$getPageContent(8, function(data) {
						var content = _this.$clearHtml(data.body);
						var warnTxt = {
							userid: userid,
							touserid: touserid,
							status: 3,
							id: 0,
							type: 9,
							content: content,
							showtime: 0,
						}
						result.unshift(warnTxt);
						if (_this.otherInfo.sex == '女' && _this.otherInfo.is_identity_authentication == 2) {
							var data = {
								userid: userid,
								touserid: touserid,
								status: 3,
								id: 0,
								type: 9,
								content: '该女生已通过官方真人认证，照片真实可放心交友',
								showtime: 1,
								time: '今天 ' + date.getHours() + ':' + date.getMinutes(),
							}
							result.push(data);
						}
						if (_this.otherInfo.sex == '男' && _this.otherInfo.wait_reply == 1) {
							var data1 = {
								userid: userid,
								touserid: touserid,
								status: 3,
								id: 0,
								type: 9,
								content: '为避免打扰过多，对方回复后才可以继续沟通~',
								showtime: 0,
							}
							result.push(data1);
						}
						console.log(result)
						result.forEach(item=>{item.anmitionPlay = false})
						_this.messageList = result
						_this.formData.index++
						setTimeout(() => {
							uni.hideLoading()
							uni.pageScrollTo({
								scrollTop: 99999,
								duration: 0
							})
							_this.isDown = true
						}, 500)
					})
				}
			},
			loadMore() {
				return new Promise(async (resolve, reject) => {
					var _this = this
					var userid = this.$store.state.userid
					var touserid = this.fromUserInfo.fromUserId
					if (this.loaded && this.load_al && this.isDown) {
						this.loadtype = 0;
						this.loaded = false;
						const {
							data: ret
						} = await this.$Request({
							url: 'apis/home/Privatechat/getMsgList',
							data: {
								userid: userid,
								touserid: touserid,
								page: this.formData.index,
							}
						})
						this.isDown = false;
						this.loaded = true;
						var code = ret.code;
						if (code == 200) {
							var result = ret.result;
							resolve(result)
						} else if (code == 201) {
							this.load_al = false;
							this.loadtype = 1;
						}
					}
				})
			},

			toRobot(msg, callback) {
				var userid = this.$store.state.userid
				var touserid = this.fromUserInfo.fromUserId
				var content = msg.content;
				var type = msg.type;
				var second = msg.second;
				if (type == 'text') {
					const {data:res} = this.$Request({
						url: 'apis/home/Privatechat/addTalk',
						data: {
							content: content,
							type: 0,
							userid: userid,
							touserid: touserid,
						}
					})
					console.log(JSON.stringify(res))
					if (res && res.code == 400) {
						this.$u.toast(res.msg);
					}
					if (res && res.code == 300) {
						uni.showModal({
							title:'提示',
							content: res.msg,
							success(res){
								if(res.confirm){
									// showDetail('frame4/show_chong');
								}
							}
						})
					}
				} else if (type == 'image') {
					this.$Upimg({
						image: content
					}, async (u) => {
						var objs = {
							type: 1,
							userid: userid,
							touserid: touserid,
							timeout: 6000,
							content: u,
							is_burn: 0
						}
						const {data:res} = await this.$Request({
							url: 'apis/home/privatechat/addTalk',
							data: objs
						})
						
						if (res && res.code == 400) {
							this.$u.toast(res.msg);
						}
						if (res && res.code == 300) {
							uni.showModal({
								title:'提示',
								content: res.msg,
								success(res){
									if(res.confirm){
										// showDetail('frame4/show_chong');
									}
								}
							})
						}
					})
				} else if (type == 'sound') {
					var obj = {
						type: 2,
						userid: userid,
						touserid: touserid,
						second: second,
						timeout: 6000,
						file: content,
					}
					console.log(JSON.stringify(obj));
					// 云存储改为路径
					if (!content) return;
					this.$Upvideo(content, async (v) => {
						const {data:res} = await this.$Request({
							url: 'apis/home/privatechat/addTalk',
							data: {
								type: 2,
								userid: userid,
								touserid: touserid,
								second: second || 1,
								content: v,
							}
						})
						if (res && res.code == 400) {
							this.$u.toast(res.msg);
						}
						if (res && res.code == 300) {
							uni.showModal({
								title:'提示',
								content: res.msg,
								success(res){
									if(res.confirm){
										// showDetail('frame4/show_chong');
									}
								}
							})
						}
					})

				}
				typeof callback == 'function' && callback()
			}
		},
		onPageScroll(e) {
			if (e.scrollTop < 50) {
				this.isDown = true
				this.joinData()
			}
		},
		onUnload() {
			this.ws.close()
		},
		onLoad(info) {
			this.fromUserInfo = {
				name: info.name,
				fromUserHeadImg: '/static/touxiang.png',
				fromUserId: info.toid
			};
			this.getOtherInfo(info.toid)
			this._user_info = {
				name: this.$store.state.userinfo.name,
				headImg: this.$HOSTURL + this.$store.state.userinfo.head_100,
				id: this.$store.state.userinfo.id
			};
			var _this = this
			var userid = this.$store.state.userid
			var touserid = this.fromUserInfo.fromUserId
			this.ws = new WS(4)
			console.log(this.ws)
			this.setRead()
			this.ws.open(() => {
				console.log('1111111111111')
				this.ws.send(JSON.stringify({
					userid: this.$store.state.userid
				}))
				this.judgeService()
			})
			this.ws.get(function(rets) {
				if (rets.indexOf('action') != -1) {
					rets = JSON.parse(rets);
					console.log(rets)
					if (rets.code == 200 && rets.action == 'Home/Privatechat/getNewMsg') {
						if (rets.data.users) {
							var useObj = rets.data.users;
							if ((useObj.userid != userid && useObj.userid != touserid) || (useObj.touserid != userid && useObj
									.touserid != touserid)) return;
							if (rets.data.new && rets.data.new.length > 0) {
								_this.messageList = [..._this.messageList, ...rets.data.new]
								setTimeout(() => {
									uni.pageScrollTo({
										scrollTop: 9999999999,
										duration: 100
									})
								}, 200)
								if (rets.data.new[0].self == 0) {
									_this.setRead();
								}
							}
							if (rets.data.recall && rets.data.recall.length > 0) {
								for (var i = 0, len = rets.data.recall.length; i < len; i++) {
									_this.messageList[i].status = 3
								}
							}
						}
					}
					if (rets.code == 200 && rets.action == 'Home/Privatechat/changeread') {
						if (rets.data.touserid == touserid) {
							// 消息已被对方读取
							// updateMsg();
						}
					}
					// 图片已焚毁
					if (rets.code == 200 && rets.action == 'Home/Privatechat/burnImg') {
						updateBurn(rets);
					}
					if (rets.action == 'Home/Privatechat/getreadcount') {
						var result = rets.data;
						var msgNum = {
							cnum: result.chat_count,
							mnum: result.message_count
						}
						_this.$store.commit('msgNum', msgNum);
					}
				}
			})
			this.getMsgList()

			//录音开始事件
			this.Recorder.onStart(e => {
				this.beginVoice();
			});
			//录音结束事件
			this.Recorder.onStop(res => {
				clearInterval(this.voiceInterval);
				this.handleRecorder(res);
			});

			//音频停止事件
			this.Audio.onStop(e => {
				console.log('111111')
				this.closeAnmition();
			});

			//音频播放结束事件
			this.Audio.onEnded(e => {
				this.closeAnmition();
			});
		},
		onReady() {
			uni.getSystemInfo({
				success: res => {
					this.imgHeight = res.windowHeight + 'px';
				}
			});

			uni.onKeyboardHeightChange(res => {
				if (res.height == 0) {
					// #ifdef MP-WEIXIN
					this.mpInputMargin = false;
					// #endif
				} else {
					this.showFunBtn = false;
				}
			});
		}
	};
</script>

<style lang="scss" scoped>
	.gridhover {
		background: #535161 !important;
	}

	.content {
		background-color: #2A2931;

		&-showfn {
			padding-bottom: 0rpx;
			padding-bottom: calc(420rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(420rpx + env(safe-area-inset-bottom));
			/* #ifdef MP-WEIXIN */
			/* #endif */
		}

		&-box {
			width: 100%;
			height: auto;
			min-height: calc(100vh - env(safe-area-inset-top) - 320rpx);
			box-sizing: content-box;
			position: relative;
			padding-bottom: 120rpx;

			/* #ifdef APP-PLUS  */
			margin-bottom: 0rpx;
			margin-bottom: constant(safe-area-inset-bottom);
			margin-bottom: env(safe-area-inset-bottom);
			/* #endif */
			/* #ifdef MP-WEIXIN */
			padding-bottom: 0rpx;
			padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
			/* #endif */

			&-bg {
				width: 100%;
				position: fixed;
				/* #ifdef MP-WEIXIN */
				bottom: 0;
				bottom: constant(safe-area-inset-bottom);
				bottom: env(safe-area-inset-bottom);
				/* #endif */
				/* #ifndef MP-WEIXIN */
				top: 0;
				left: 0;
				/* #endif */
			}

			&-loading {
				text-align: center;
				padding: 20rpx 0;
			}
			.placeholder{
				height: 120rpx;
			}

			.getwx {
				position: fixed;
				/* #ifdef H5 */
				top: 80rpx;
				/* #endif */
				/* #ifndef H5 */
				top: 160rpx;
				/* #endif */
				left: 0;
				width: 100vw;
			}

			.message {
				padding: 13rpx 20rpx;
			}

			.message-item {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				align-content: flex-start;
				flex-wrap: nowrap;
				flex-direction: row;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.content {
					padding: 20rpx;
					max-width: 500rpx;
					border-radius: 10rpx;
					font-size: 28rpx;
				}

				// 语音
				.contentType2 {
					display: flex;
					flex-direction: row;
					align-items: center;

					.voice_icon {
						height: 34rpx;
						width: 34rpx;
						background-repeat: no-repeat;
						background-size: 100%;
					}

					.voice_icon_right {
						background-image: url(/static/voice-left-3.png);
						margin-left: 10rpx;
					}

					.voice_icon_left {
						background-image: url(/static/voice-right-3.png);
						margin-right: 10rpx;
					}

					.voice_icon_right_an {
						animation: voiceAn_right 1s linear alternate infinite;
					}

					.voice_icon_left_an {
						animation: voiceAn_left 1s linear alternate infinite;
					}

					@keyframes voiceAn_right {
						0% {
							background-image: url(/static/voice-left-1.png);
						}

						50% {
							background-image: url(/static/voice-left-2.png);
						}

						100% {
							background-image: url(/static/voice-left-3.png);
						}
					}

					@keyframes voiceAn_left {
						0% {
							background-image: url(/static/voice-right-1.png);
						}

						50% {
							background-image: url(/static/voice-right-2.png);
						}

						100% {
							background-image: url(/static/voice-right-3.png);
						}
					}
				}

				//图片
				.contentType3 {
					padding: 0;
					background-color: transparent !important;

					.img {
						border-radius: 10rpx;
						width: 200rpx;
						height: auto;
						max-width: 300rpx;
						max-height: 400rpx;
					}
				}

				.contentType3::after {
					border: none !important;
					display: none !important;
				}

				.content-type-right {
					flex-direction: row-reverse;
				}

				&.right {
					flex-direction: row-reverse;

					.content {
						background-color: $uni-color-success;
						margin-right: 28rpx;
						word-break: break-all;
						line-height: 36rpx;
						position: relative;

						&::after {
							content: '';
							display: block;
							width: 0;
							height: 0;
							border-top: 10rpx solid transparent;
							border-bottom: 10rpx solid transparent;
							border-left: 16rpx solid $uni-color-success;
							position: absolute;
							right: -16rpx;
							top: 30rpx;
						}
					}
				}

				&.left {
					.content {
						background-color: $uni-text-color-inverse;
						margin-left: 28rpx;
						word-break: break-all;
						line-height: 36rpx;
						position: relative;

						&::after {
							content: '';
							display: block;
							width: 0;
							height: 0;
							border-top: 10rpx solid transparent;
							border-bottom: 10rpx solid transparent;
							border-right: 16rpx solid $uni-text-color-inverse;
							position: absolute;
							left: -16rpx;
							top: 30rpx;
						}
					}
				}
			}
		}

		.input-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: content-box;
			z-index: 999;
			background-color: #2A2931;

			/* #ifdef APP-PLUS */
			margin-bottom: 0rpx;
			margin-bottom: constant(safe-area-inset-bottom);
			margin-bottom: env(safe-area-inset-bottom);
			/* #endif */
			/* #ifdef MP-WEIXIN */
			padding-bottom: 0rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			/* #endif */

			&-flex {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				padding: 20rpx;
				box-sizing: border-box;

				image {
					width: 56rpx;
					height: 56rpx;
				}

				.icon_img {
					margin-right: 20rpx;
				}

				.icon_btn_add {
					margin-left: 20rpx;
				}

				&-grow {
					flex-grow: 1;

					.content {
						box-sizing: border-box;
						background-color: #666;
						height: 80rpx;
						padding: 0 20rpx;
						border-radius: 12rpx;
						font-size: 28rpx;
						caret-color: $uni-color-success;
						color: #fff;
					}

					.voice_title {
						text-align: center;
						background-color: #ffffff;
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 12rpx;
					}
				}

				.btn {
					margin-left: 20rpx;
					background-color: $u-type-success;
					border: none;
				}
			}

			.fun-box {
				opacity: 0;
				transition: all 0.1s ease-in-out;
				height: 0;

				.grid-text {
					padding-top: 10rpx;
					color: $uni-text-color-grey;
				}

			}

			.show-fun-box {
				opacity: 1;
				height: 300rpx;
			}
		}

		.input-box-mpInputMargin {
			/* #ifdef MP-WEIXIN */
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			/* #endif */
		}

		.voice_an {
			width: 300rpx;
			height: 300rpx;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -55%);
			background-color: rgba(41, 41, 41, 0.7);
			color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			border-radius: 10rpx;

			.text {
				padding-top: 30rpx;
			}

			@keyframes runVoice {
				0% {
					height: 10%;
				}

				20% {
					height: 50%;
				}

				50% {
					height: 100%;
				}

				80% {
					height: 50%;
				}

				100% {
					height: 0%;
				}
			}

			.wave {
				width: 6rpx;
				height: 100%;
				margin-left: 10rpx;
				border-radius: 50rpx;
				background-color: #999;
				vertical-align: middle;
				display: inline-block;
			}

			.voice_an_icon {
				width: 200rpx;
				height: 100rpx;
				line-height: 50rpx;
				margin: 50rpx 0;
			}

			.voice_an_icon #one {
				animation: runVoice 0.6s infinite 0.1s;
			}

			.voice_an_icon #two {
				animation: runVoice 0.6s infinite 0.3s;
			}

			.voice_an_icon #three {
				animation: runVoice 0.6s infinite 0.6s;
			}

			.voice_an_icon #four {
				animation: runVoice 0.6s infinite 0.1s;
			}

			.voice_an_icon #five {
				animation: runVoice 0.6s infinite 0.3s;
			}

			.voice_an_icon #six {
				animation: runVoice 0.6s infinite 0.6s;
			}

			.voice_an_icon #seven {
				animation: runVoice 0.6s infinite 0.1s;
			}
		}
	}

	.biaoqing-wrap {
		opacity: 0;
		transition: all 0.1s ease-in-out;
		height: 0;

		&.show-biaoqing-box {
			opacity: 1;
			height: 300rpx;
		}

		.bq {
			height: 300rpx;
			overflow-y: auto;
			display: flex;
			flex-wrap: wrap;

			image {
				width: calc(10vw);
				height: calc(10vw);
				margin: 10rpx 0rpx;
			}
		}
	}
</style>
